<template>
  <el-row :gutter="6">
    <el-col :span="8">
      <Sidebar :initStyle="initStyle" :containerLeft="containerLeft" :containerTop="containerTop"></Sidebar>
    </el-col>
    <el-col :span="16">
      <Print :labelStyle="labelStyle" @convertLocationMethod="convertLocationMethod" ref="print"></Print>
    </el-col>
  </el-row>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
import Sidebar from '@/views/sidebar'
import Print from '@/views/print'
import QRCode from 'qrcode'

export default {
  name: 'App',
  components: {
    Sidebar,
    Print
  },
  data () {
    return {
      // 最终保存的内容
      initStyle: {
        num: 1,
        position: 'static',
        width: 500,
        height: 500,
        margin: '10px',
        borderStyle: 'dashed',
        borderWidth: 1,
        borderColor: "#000",
        borderRadius: 0,
        boxSizing: 'border-box',
        subline: true,
        // 每一项元素的样式
        itemStyle: []
      },
      labelStyle: {},
      // 保存当前元素的位置信息
      map: new Map(),
      // 标签位置
      containerLeft: undefined,
      containerTop: undefined,
    }
  },
  mounted () {
    // 获取打印区域的位置
    this.containerLeft = this.$refs.print.containerLeft
    this.containerTop = this.$refs.print.containerTop

    let initStyle = localStorage.getItem('EASY_PRINT_KEY')
    if (initStyle) {
      initStyle = JSON.parse(initStyle)
      // 删除相对定位
      delete initStyle['position']
      initStyle.itemStyle.forEach(item => {
        item.saveLeft = item.left
        item.saveTop = item.top
        item.left = parseInt(item.left) + this.containerLeft + 'px'
        item.top = parseInt(item.top) + this.containerTop + 'px'
      })
      this.$set(this, 'initStyle', initStyle)
    }
    this.$bus.$on('staging', this.staging)
  },
  watch: {
    initStyle: {
      handler (newVal, oldVal) {
        this.labelStyle?.itemStyle?.forEach(item => {
          this.map.set(item.id, { left: item.left, top: item.top, saveLeft: item.saveLeft, saveTop: item.saveTop })
        })

        this.labelStyle = {
          ...newVal,
          width: `${newVal.width}px`,
          height: `${newVal.height}px`,
          borderWidth: `${newVal.borderWidth}px`,
          borderRadius: `${newVal.borderRadius}px`,
          padding: `${newVal.padding}px`,
          itemStyle: cloneDeep(newVal.itemStyle)
        }
        this.labelStyle.itemStyle.forEach(async (item, index) => {
          if (this.map.has(item.id)) {
            const position = this.map.get(item.id)
            item.left = position.left
            item.top = position.top
            item.saveLeft = position.saveLeft
            item.saveTop = position.saveTop
          }
          if (item.type === 'text') {
            item.fontSize = item.fontSize + 'px'
            item.letterSpacing = item.letterSpacing + 'px'
          } else if (item.type === 'img') {
            item.width = item.width + 'px'
          } else if (item.type === 'qrcode') {
            item.width = item.width + 'px'
            if (item.text) {
              item.text = await QRCode.toDataURL(item.text)
            }
          }
        })
        this.map.clear()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 从绝对定位转为相对定位
    convertLocationMethod () {
      const initStyle = cloneDeep(this.initStyle)
      initStyle.position = 'relative'
      const initItemStyle = initStyle.itemStyle

      const labelItemStyle = this.labelStyle.itemStyle
      labelItemStyle.forEach((item, index) => {
        initItemStyle[index]['left'] = item.saveLeft + 'px'
        initItemStyle[index]['top'] = item.saveTop + 'px'
        if (item.type === 'qrcode') {
          initItemStyle[index]['text'] = item.text
        }
      })
      this.labelStyle.itemStyle = undefined
      this.initStyle = initStyle
    },
    staging () {
      this.convertLocationMethod()
      // 存储
      localStorage.setItem('EASY_PRINT_KEY', JSON.stringify(this.initStyle))
    },
  }
}
</script>

<style>
body {
  padding: 5px;
  background-color: rgb(240, 240, 240);
}

el-row {
  margin-left: 0;
  margin-right: 0;
}
</style>
